<template>
  <div class="product-detail">
    <!-- 商品图片和基本信息 -->
    <div class="product-header">
      <div class="product-images">
        <el-carousel height="400px">
          <el-carousel-item v-for="(image, index) in product.imageUrls" :key="index">
            <img :src="image" :alt="`商品图片${index + 1}`" class="carousel-image" />
          </el-carousel-item>
        </el-carousel>

        <div class="image-thumbnails">
          <img v-for="(image, index) in product.imageUrls" :key="index" :src="image" :alt="`缩略图${index + 1}`" class="thumbnail" :class="{ active: currentImageIndex === index }" @click="currentImageIndex = index" />
        </div>
      </div>

      <div class="product-info">
        <h1 class="product-title">{{ product.name }}</h1>
        <div class="product-subtitle">{{ product.origin }}</div>

        <div class="price-section">
          <span class="current-price">¥{{ product.price }}</span>
          <span v-if="product.originalPrice" class="original-price">¥{{ product.originalPrice }}</span>
          <el-tag v-if="product.discount" type="danger" size="small">{{ product.discount }}折</el-tag>
        </div>

        <div class="product-meta">
          <div class="rating">
            <el-rate v-model="product.rating" disabled show-score />
            <span class="review-count">({{ product.reviewCount }}条评价)</span>
          </div>
          <div class="sales-info">
            <span>已售 {{ product.saleCount }} 件</span>
          </div>
        </div>

        <!-- 商品规格选择 -->
        <div class="product-specs">
          <div v-for="spec in product.specifications" :key="spec.name" class="spec-group">
            <label class="spec-label">{{ spec.name }}：</label>
            <div class="spec-options">
              <el-button v-for="option in spec.options" :key="option.value" :type="selectedSpecs[spec.name] === option.value ? 'primary' : ''" size="small" @click="selectSpec(spec.name, option.value)">
                {{ option.label }}
              </el-button>
            </div>
          </div>
        </div>

        <!-- 购买操作 -->
        <div class="purchase-actions">
          <div class="quantity-selector">
            <span>数量：</span>
            <el-input-number v-model="quantity" :min="1" :max="product.stock" />
            <span class="stock-info">库存{{ product.stock }}件</span>
          </div>

          <div class="action-buttons">
            <el-button type="warning" size="large" @click="addToCart">
              <el-icon><ShoppingCart /></el-icon>
              加入购物车
            </el-button>
            <el-button type="danger" size="large" @click="buyNow"> 立即购买 </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品详情标签页 -->
    <div class="product-tabs">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="商品详情" name="details">
          <div class="product-description">
            <h3>商品介绍</h3>
            <div v-html="product.htmlContent"></div>

            <div v-if="parameters.length > 0">
              <h3>商品参数</h3>
              <el-table :data="parameters" style="width: 100%">
                <el-table-column prop="name" label="参数名称" width="200" />
                <el-table-column prop="value" label="参数值" />
              </el-table>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="用户评价" name="reviews">
          <div class="reviews-section">
            <div class="reviews-list">
              <div v-for="review in reviews" :key="review.id" class="review-item">
                <div class="review-header">
                  <el-avatar :src="review.avatar" :alt="review.username" />
                  <div class="review-info">
                    <div class="username">{{ review.username }}</div>
                    <div class="review-meta">
                      <el-rate v-model="review.rating" disabled size="small" />
                      <span class="review-date">{{ review.date }}</span>
                    </div>
                  </div>
                </div>
                <div class="review-content">{{ review.content }}</div>
                <div v-if="review.images" class="review-images">
                  <img v-for="img in review.images" :key="img" :src="img" alt="评价图片" />
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="售后保障" name="service">
          <div class="service-info">
            <el-row :gutter="20">
              <el-col :span="8" v-for="service in services" :key="service.title">
                <el-card class="service-card">
                  <div class="service-icon">
                    <el-icon size="24"><component :is="service.icon" /></el-icon>
                  </div>
                  <h4>{{ service.title }}</h4>
                  <p>{{ service.description }}</p>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 相关推荐 -->
    <div class="related-products">
      <h3>相关推荐</h3>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in relatedProducts" :key="item.id">
          <el-card class="related-item" @click="viewProduct(item.id)">
            <img :src="item.image" :alt="item.title" />
            <div class="item-info">
              <h4>{{ item.title }}</h4>
              <div class="item-price">¥{{ item.price }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { ShoppingCart } from '@element-plus/icons-vue'
import http from '@/apis/product'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

// 响应式数据
const currentImageIndex = ref(0)
const activeTab = ref('details')
const quantity = ref(1)
const selectedSpecs = reactive({})

// 商品数据
const product = ref({
  id: 1,
  title: 'iPhone 15 Pro Max',
  subtitle: '钛金属设计 | A17 Pro芯片 | 专业级摄像头系统',
  currentPrice: 9999,
  originalPrice: 10999,
  discount: 9.1,
  rating: 4.8,
  reviewCount: 2847,
  salesCount: 15420,
  stock: 99,
  images: ['/pidth=400', '/placeholder.svg?height=400&width=400', '/placeholder.svg?height=400&width=400', '/placeholder.svg?height=400&width=400'],

  description: `
    <h4>全新设计，钛金属材质</h4>
    <p>iPhone 15 Pro Max 采用航空级钛金属设计，更轻更坚固。精密铣削工艺打造的钛金属中框，搭配磨砂玻璃背板，呈现出色质感。</p>
  `
})
const parameters = ref([
  // { name: '屏幕尺寸', value: '6.7 英寸' },
  // { name: '分辨率', value: '2796 x 1290 像素' },
  // { name: '处理器', value: 'A17 Pro 芯片' },
  // { name: '存储容量', value: '256GB/512GB/1TB' },
  // { name: '摄像头', value: '4800万像素主摄 + 1200万像素超广角 + 1200万像素长焦' },
  // { name: '电池续航', value: '视频播放最长可达 29 小时' },
  // { name: '操作系统', value: 'iOS 17' }
])

const reviews = ref([
  // {
  //   id: 1,
  //   username: '科技达人小王',
  //   avatar: '/placeholder.svg?height=40&width=40',
  //   rating: 5,
  //   date: '2024-01-15',
  //   content: '用了一个月了，钛金属手感真的很棒，比之前的不锈钢轻了不少。拍照效果也有明显提升，特别是夜景模式。',
  //   images: ['/placeholder.svg?height=100&width=100', '/placeholder.svg?height=100&width=100']
  // }
])

const services = ref([
  {
    icon: 'Shield',
    title: '品质保证',
    description: '正品保证，支持官方验证'
  },
  {
    icon: 'Truck',
    title: '快速配送',
    description: '24小时内发货，顺丰包邮'
  },
  {
    icon: 'Service',
    title: '售后服务',
    description: '7天无理由退换，1年质保'
  }
])
// 相关推荐商品
const relatedProducts = ref([
  // {
  //   id: 2,
  //   title: 'iPhone 15 Pro',
  //   price: 7999,
  //   image: '/placeholder.svg?height=200&width=200'
  // }
])

// 方法
const selectSpec = (specName, value) => {
  selectedSpecs[specName] = value
}

const addToCart = () => {
  ElMessage.info('暂不支持添加到购物车')
}

const buyNow = () => {
  ElMessage.info('暂不支持线上购买')
}

const viewProduct = (productId) => {
  ElMessage.info(`查看商品 ${productId}`)
}

onMounted(() => {
  if (route.query.id) {
    http.fetchById(route.query.id).then((response) => {
      let { code, message, result } = response.data
      if (code !== 200) {
        ElMessage.error(message)
        return
      }
      // console.log(result)
      result.imageUrls = JSON.parse(result.imageUrls)
      result.tagsJson = JSON.parse(result.tagsJson)
      product.value = result
    })
  }
})
</script>

<style scoped>
.product-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.product-header {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

.product-images {
  flex: 1;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}

.thumbnail.active {
  border-color: #409eff;
}

.product-info {
  flex: 1;
}

.product-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #303133;
}

.product-subtitle {
  font-size: 16px;
  color: #909399;
  margin-bottom: 20px;
}

.price-section {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.current-price {
  font-size: 32px;
  font-weight: bold;
  color: #f56c6c;
}

.original-price {
  font-size: 18px;
  color: #909399;
  text-decoration: line-through;
}

.product-meta {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-count {
  color: #909399;
}

.sales-info {
  color: #909399;
}

.product-specs {
  margin-bottom: 30px;
}

.spec-group {
  margin-bottom: 20px;
}

.spec-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}

.spec-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.purchase-actions {
  border-top: 1px solid #ebeef5;
  padding-top: 30px;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.stock-info {
  color: #909399;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

.action-buttons .el-button {
  flex: 1;
  height: 50px;
}

.product-tabs {
  margin-bottom: 40px;
}

.product-description h3 {
  margin: 30px 0 15px 0;
  color: #303133;
}

.reviews-section {
  max-width: 800px;
}

.reviews-list {
  space-y: 20px;
}

.review-item {
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  margin-bottom: 20px;
}

.review-header {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.review-info {
  flex: 1;
}

.username {
  font-weight: 500;
  margin-bottom: 5px;
}

.review-meta {
  display: flex;
  align-items: center;
  gap: 15px;
}

.review-date {
  color: #909399;
  font-size: 14px;
}

.review-content {
  margin-bottom: 15px;
  line-height: 1.6;
}

.review-images {
  display: flex;
  gap: 10px;
}

.review-images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.service-info {
  padding: 20px 0;
}

.service-card {
  text-align: center;
  height: 100%;
}

.service-icon {
  margin-bottom: 15px;
  color: #409eff;
}

.service-card h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

.service-card p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.related-products {
  margin-top: 40px;
}

.related-products h3 {
  margin-bottom: 20px;
  color: #303133;
}

.related-item {
  cursor: pointer;
  transition: transform 0.3s;
}

.related-item:hover {
  transform: translateY(-5px);
}

.related-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.item-info {
  padding: 15px 0;
}

.item-info h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #303133;
}

.item-price {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}

@media (max-width: 768px) {
  .product-header {
    flex-direction: column;
    gap: 20px;
  }

  .rating-overview {
    flex-direction: column;
    gap: 20px;
  }

  .action-buttons {
    flex-direction: column;
  }
}
</style>
